	/* 头部 */
	.navbarbox {
		width: 100%;
		height: 90rpx;
/* 		position: fixed;
		left: 0;
		top: 0; */
		background-image: url('../../static/icon/aa/head-background.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 99;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}

	.navbar {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.navbarimage {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: 30rpx;
		left: 20rpx;
	}

	.navbarrow {
		width: 350rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		margin-left: 20rpx;
		/* margin-left: 70rpx; */
	}

	.navbarli {
		width: 50%;
		line-height: 90rpx;
		text-align: center;
		color: #ffffff;
		font-size: 30rpx;
	}

	.navbarli-in {
		color: #ffffff;
		font-size: 33rpx;
		font-weight: bold;
	}

	.databox-av {
		position: absolute;
		bottom: 15rpx;
		width: 13%;
		height: 8rpx;
		background-color: #ffffff;
		border-radius: 30px;
		transition: all 500ms;
		left: 18.5%;
	}

	.explain {
		width: 45rpx;
		height: 45rpx;
	}

	.ranking {
		width: 92rpx;
		height: 52rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
	}

	.beij {
		position: relative;
		width: 100%;
		height: 488rpx;
		background-image: url('../../static/icon/aa/beijtu.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.beijitem {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* =========== */
	.rank1 {
		position: absolute;
		left: 30.5%;
		top: -9rpx;
		width: 290rpx;
		height: 420rpx;
	}

	.rank1image {
		width: 236rpx;
		height: 236rpx;
		position: relative;
	}

	.rank1image-image {
		width: 236rpx;
		height: 236rpx;
		z-index: 99;
	}

	.rank1image-avatar {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 41rpx;
		left: 41rpx;
		border-radius: 50%;
		z-index: 98;
	}

	.rank1item {
		width: 160rpx;
		height: 45rpx;
		background: rgba(230, 42, 255, .2);
		border-radius: 50rpx;
	}

	.rank1item image {
		width: 32rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	/* =========== */
	.rank2 {
		position: absolute;
		left: 7%;
		top: 95rpx;
		width: 183rpx;
		height: 318rpx;
	}

	.rank2image {
		width: 178rpx;
		height: 178rpx;
		position: relative;
	}

	.rank2image-image {
		width: 178rpx;
		height: 178rpx;
		z-index: 99;
	}

	.rank2image-avatar {
		width: 118rpx;
		height: 118rpx;
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		border-radius: 50%;
		z-index: 98;
	}

	.rank2item {
		width: 130rpx;
		height: 45rpx;
		background: rgba(230, 42, 255, .2);
		border-radius: 50rpx;
	}

	.rank2item image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	/* =========== */
	.rank3 {
		position: absolute;
		right: 7%;
		top: 130rpx;
		width: 183rpx;
		height: 300rpx;
	}

	.rank3image {
		width: 158rpx;
		height: 158rpx;
		position: relative;
	}

	.rank3image-image {
		width: 158rpx;
		height: 158rpx;
		z-index: 99;
	}

	.rank3image-avatar {
		width: 105rpx;
		height: 105rpx;
		position: absolute;
		top: 30rpx;
		left: 26rpx;
		border-radius: 50%;
		z-index: 98;
	}

	.rank3item {
		width: 130rpx;
		height: 45rpx;
		background: rgba(230, 42, 255, .2);
		border-radius: 50rpx;
	}

	.rank3item image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}
	
	.rank-box{
		padding: 20rpx 39rpx;
	}
	
	.rank-list{
		margin-bottom: 50rpx;
	}
	
	
	.buttombox{
		width: 90%;
		height: 100rpx;
		background-color: #ffffff;
		position:fixed;
		left: 5%;
		bottom: 10%;
		border-radius: 50rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0,0,0,.12);
		padding: 0 20rpx;
	}
	
	.buttombox image{
		width: 80rpx;
		height: 80rpx;
		margin-right:20rpx;
	}
	
	.buttomtxt{
		width: 150rpx;
		height: 60rpx;
		background-color:#353535;
		color: #ffffff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
	}